<script setup lang="ts">
import { QForm, type FormItemRows } from '@meetjs/element-plus-kit'
import { type FormRules } from 'element-plus'
import type { IGetDictsRes } from '@/api/system/dict/type'
import { getData, addData, updateData } from '@/api/system/dictData/index'
import type { DictDataParams } from '@/api/system/dictData/type'

const props = defineProps<{
	sysNormalDisable: IGetDictsRes
}>()

const emits = defineEmits<{
	refresh: []
}>()

const visible = ref(false)
const loading = ref(false)
const title = ref('新增字典数据')
const formRef = ref()

const baseFormData: DictDataParams = {
	dictType: '',
	dictLabel: '',
	dictValue: '',
	dictSort: 0,
	listClass: 'default',
	status: 0,
	remark: ''
}

const dialogFormValue = ref<DictDataParams>({ ...baseFormData })
const listClassOptions = ref([
	{
		value: 'default',
		label: '默认(default)'
	},
	{
		value: 'primary',
		label: '主要(primary)'
	},
	{
		value: 'success',
		label: '成功(success)'
	},
	{
		value: 'info',
		label: '信息(info)'
	},
	{
		value: 'warning',
		label: '警告(warning)'
	},
	{
		value: 'danger',
		label: '危险(danger)'
	}
])

const dialogOptions = ref<FormItemRows[]>([
	{
		type: 'input',
		label: '字典类型',
		prop: 'dictType',
		attrs: {
			disabled: true
		}
	},
	{
		type: 'input',
		label: '数据标签',
		prop: 'dictLabel'
	},
	{
		type: 'input',
		label: '数据键值',
		prop: 'dictValue'
	},
	{
		type: 'input',
		label: '样式属性',
		prop: 'cssClass'
	},
	{
		type: 'input-number',
		label: '显示排序',
		prop: 'dictSort',
		attrs: {
			placeholder: '请输入显示排序',
			min: 0,
			controls: false
		}
	},
	{
		type: 'select',
		label: '回显样式',
		prop: 'listClass',
		options: listClassOptions as unknown as any
	},
	{
		type: 'radio',
		label: '状态',
		prop: 'status',
		options: []
	},
	{
		type: 'textarea',
		label: '备注',
		prop: 'remark',
		attrs: {
			rows: 3
		}
	}
])

const rules = reactive<FormRules<{ [k: string]: any }>>({
	dictLabel: [
		{
			required: true,
			message: '请输入数据标签'
		}
	],
	dictValue: [
		{
			required: true,
			message: '请输入数据键值'
		}
	],
	dictSort: [
		{
			required: true,
			message: '请输入显示排序'
		}
	]
})
watch(
	() => props.sysNormalDisable,
	() => {
		dialogOptions.value[6].options = props.sysNormalDisable
	}
)

const init = async (operationType: 'add' | 'edit', dictCode?: string, formData?: DictDataParams, dictType?: string) => {
	visible.value = true
	title.value = operationType === 'add' ? '新增字典数据' : '编辑字典数据'

	if (operationType === 'edit') {
		if (formData) {
			// 直接使用传入的数据
			dialogFormValue.value = { ...formData }
		} else if (dictCode) {
			// 通过 API 获取数据
			loading.value = true
			try {
				const { data } = await getData(dictCode)
				dialogFormValue.value = { ...data }
			} catch (error) {
				console.error('获取字典数据失败:', error)
				ElMessage.error('获取字典数据失败，请重试')
			} finally {
				loading.value = false
			}
		}
	} else {
		// 新增模式
		dialogFormValue.value = {
			...baseFormData,
			dictType: dictType || ''
		}
	}

	// 清理表单验证状态
	setTimeout(() => {
		formRef.value?.clearValidate()
	})
}
const submit = () => {
	formRef.value?.validate(async (valid: boolean) => {
		if (valid) {
			loading.value = true
			try {
				const apiFunc = title.value === '新增字典数据' ? addData : updateData
				await apiFunc({ ...dialogFormValue.value })
				const message = title.value === '新增字典数据' ? '新增成功' : '修改成功'
				ElMessage.success(message)
				visible.value = false
				emits('refresh')
			} finally {
				loading.value = false
			}
		}
	})
}

defineExpose({
	init
})
</script>

<template>
	<ElDialog
		v-model="visible"
		:title="title"
		:close-on-click-modal="false"
		width="600px"
	>
		<QForm
			ref="formRef"
			label-width="100px"
			:model="dialogFormValue"
			:form-options="dialogOptions"
			:rules="rules"
			:required="true"
		/>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button
				type="primary"
				:loading="loading"
				@click="submit"
			>
				确定
			</el-button>
		</template>
	</ElDialog>
</template>

<style scoped></style>
